<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form';

import { reactive, ref } from 'vue';

import {
  Form,
  type FormInstance,
  FormItem,
  Input,
  InputNumber,
  Modal,
  Select,
  Textarea,
} from 'ant-design-vue';

const visible = ref<boolean>(false);
const formRef = ref<FormInstance>();

const formModel = reactive<{
  name: string | undefined;
}>({
  name: undefined,
});

const formRules = reactive<Record<string, Rule[]>>({
  name: [{ required: true, message: '请输入名称' }],
});

async function handleSubmit() {
  await formRef.value?.validate();
  visible.value = false;
}

defineExpose({
  open() {
    visible.value = true;
  },
});
</script>

<template>
  <Modal v-model:open="visible" :width="800" title="创建KOL" @ok="handleSubmit">
    <p class="mb-4 text-gray-400">填写KOL的基本信息和合作详情</p>

    <Form
      ref="formRef"
      :model="formModel"
      :rules="formRules"
      class="grid grid-cols-2 gap-x-4"
      layout="vertical"
    >
      <FormItem label="姓名" name="name">
        <Input v-model:value="formModel.name" placeholder="请输入KOL姓名" />
      </FormItem>

      <FormItem label="主要平台">
        <Select
          :options="[
            {
              label: '抖音',
              value: '抖音',
            },
            {
              label: '小红书',
              value: '小红书',
            },
            {
              label: '微博',
              value: '微博',
            },
            {
              label: 'B站',
              value: 'B站',
            },
            {
              label: '快手',
              value: '快手',
            },
          ]"
          placeholder="请选择"
        />
      </FormItem>

      <FormItem label="粉丝数量">
        <InputNumber class="w-full" placeholder="如:50万" />
      </FormItem>

      <FormItem label="内容类别">
        <Select
          :options="[
            {
              label: '美妆护肤',
              value: '美妆护肤',
            },
            {
              label: '时尚穿搭',
              value: '时尚穿搭',
            },
            {
              label: '生活方式',
              value: '生活方式',
            },
            {
              label: '美食',
              value: '美食',
            },
            {
              label: '旅行',
              value: '旅行',
            },
            {
              label: '科技数码',
              value: '科技数码',
            },
            {
              label: '母音育儿',
              value: '母音育儿',
            },
          ]"
          placeholder="请选择"
        />
      </FormItem>

      <FormItem label="所在城市">
        <Input placeholder="如:上海" />
      </FormItem>

      <FormItem label="联系邮箱">
        <Input placeholder="请输入联系邮箱" />
      </FormItem>

      <FormItem label="联系电话">
        <Input placeholder="请输入联系电话" />
      </FormItem>

      <FormItem label="合作报价">
        <Input placeholder="请输入合作报价" />
      </FormItem>

      <FormItem label="个人简介">
        <Textarea placeholder="请输入KOL的个人简介和特色" />
      </FormItem>
    </Form>
  </Modal>
</template>
